<template>
  <div>
    <!-- 提示文本 -->
    <label>{{ label }}</label>
    <div>
      <slot></slot>
      <!-- 错误提示 -->
      <p v-if="errMessage">{{ errMessage }}</p>
    </div>
  </div>
</template>

<script>
import AsyncValidator from 'async-validator'
export default {
  name: 'LgFormItem',
  // 注入form成员
  inject: ['form'],
  // 外部传入属性
  props: {
    label: {
      type: String
    },
    prop: {
      type: String
    }
  },
  mounted() {
    // 注册自定义事件validate 用于input组件触发
    this.$on('validate', () => {
      this.validate()
    })
  },
  data () {
    return {
      errMessage: ''
    }
  },
  methods: {
    // 验证当前表单项
    validate () {
      // 判断是否存在prop
      if (!this.prop) return
      // 从form中获取该表单项的验证属性值及验证规则
      const value = this.form.model[this.prop]
      const rules = this.form.rules[this.prop]

      // 验证属性的规则对象
      const descriptor = { [this.prop]: rules }
      // 创建validator对象
      const validator = new AsyncValidator(descriptor)
      // 调用validator对象的validate进行验证  该方法返回的是一个promise
      // 第一个参数为包含验证属性以及值的对象，第二个参数为回调函数，函数参数为验证失败的信息
      return validator.validate({ [this.prop]: value }, errors => {
        if (errors) {
          this.errMessage = errors[0].message
        } else {
          this.errMessage = ''
        }
      })
    }  
  }
}
</script>

<style>

</style>
